﻿<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>乐优商城--结算页</title>

    <link rel="stylesheet" type="text/css" href="css/webbase.css" />
    <link rel="stylesheet" type="text/css" href="css/pages-getOrderInfo.css" />
</head>

<body>
	<!--head-->
	<div id="orderInfoApp">
		<div class="top">
			<shortcut />
		</div>

	<div  class="cart py-container">

			<!--logoArea-->
			<div class="logoArea">
				<div class="fl logo"><span class="title">结算页</span></div>
			</div>

		<!--主内容-->
		<div class="checkout py-container">
			<div class="checkout-tit">
				<h4 class="tit-txt">填写并核对订单信息</h4>
			</div>
			<div class="checkout-steps">
				<!--收件人信息-->
				<div class="step-tit">
					<h5>收件人信息<span><a data-toggle="modal" data-target=".edit" data-keyboard="false" class="newadd">新增收货地址</a></span></h5>
				</div>
				<div class="step-cont">
					<div class="addressInfo">
						<ul class="addr-detail">
							<li class="addr-item" v-for="(a,i) in addresses" :key="i">
							  <div>
								  <div :class="{con:true,name:true,selected:i === selectedAddress}"><a href="javascript:;" @click.stop="selectedAddress=i" >{{a.name}}<span title="点击取消选择"></span>&nbsp;</a></div>
								<div class="con address">{{a.state + a.city + a.district + a.address}} <span>{{a.phone}}</span>
									<span class="base" v-if="a.default">默认地址</span>
									<span class="edittext"><a data-toggle="modal" data-target=".edit" data-keyboard="false" >编辑</a>&nbsp;&nbsp;<a href="javascript:;">删除</a></span>
								</div>
								<div class="clearfix"></div>
							  </div>

							</li>
						</ul>
						<!--添加地址-->
                          <div  tabindex="-1" role="dialog" data-hasfoot="false" class="sui-modal hide fade edit">
						  <div class="modal-dialog">
						    <div class="modal-content">
						      <div class="modal-header">
						        <button type="button" data-dismiss="modal" aria-hidden="true" class="sui-close">×</button>
						        <h4 id="myModalLabel" class="modal-title">添加收货地址</h4>
						      </div>
						      <div class="modal-body">
						      	<form action="" class="sui-form form-horizontal">
						      		 <div class="control-group">
									    <label class="control-label">收货人：</label>
									    <div class="controls">
									      <input type="text" class="input-medium">
									    </div>
									  </div>

									   <div class="control-group">
									    <label class="control-label">详细地址：</label>
									    <div class="controls">
									      <input type="text" class="input-large">
									    </div>
									  </div>
									   <div class="control-group">
									    <label class="control-label">联系电话：</label>
									    <div class="controls">
									      <input type="text" class="input-medium">
									    </div>
									  </div>
									   <div class="control-group">
									    <label class="control-label">邮箱：</label>
									    <div class="controls">
									      <input type="text" class="input-medium">
									    </div>
									  </div>
									   <div class="control-group">
									    <label class="control-label">地址别名：</label>
									    <div class="controls">
									      <input type="text" class="input-medium">
									    </div>
									    <div class="othername">
									    	建议填写常用地址：<a href="#" class="sui-btn btn-default">家里</a>　<a href="#" class="sui-btn btn-default">父母家</a>　<a href="#" class="sui-btn btn-default">公司</a>
									    </div>
									  </div>
						      	</form>
						      </div>
						      <div class="modal-footer">
						        <button type="button" data-ok="modal" class="sui-btn btn-primary btn-large">确定</button>
						        <button type="button" data-dismiss="modal" class="sui-btn btn-default btn-large">取消</button>
						      </div>
						    </div>
						  </div>
						</div>
						 <!--确认地址-->
					</div>
					<div class="hr"></div>

				</div>
				<div class="hr"></div>
				<!--支付和送货-->
				<div class="payshipInfo">
					<div class="step-tit">
						<h5>支付方式</h5>
					</div>
					<div class="step-cont">
						<ul class="payType">
							<li :class="{selected:order.paymentType==1}" @click="order.paymentType=1" >微信付款<span title="点击取消选择"></span></li>
							<li :class="{selected:order.paymentType==2}" @click="order.paymentType=2">货到付款<span title="点击取消选择"></span></li>
						</ul>
					</div>
					<div class="hr"></div>
					<div class="step-tit">
						<h5>送货清单</h5>
					</div>
					<div class="step-cont">
						<ul class="send-detail">
							<li >
								<div class="sendGoods">
									<ul class="yui3-g" v-for="(cart,index) in carts" :key="index">
										<li class="yui3-u-1-6">
											<span><img width="70px" height="70px" :src="cart.image"/></span>
										</li>
										<li class="yui3-u-7-12">
											<div class="desc">{{cart.title}}</div>
											<div class="seven">7天无理由退货</div>
										</li>
										<li class="yui3-u-1-12">
											<div class="price">￥{{ly.formatPrice(cart.price)}}</div>
										</li>
										<li class="yui3-u-1-12">
											<div class="num">X{{cart.num}}</div>
										</li>
										<li class="yui3-u-1-12">
											<div class="exit">有货</div>
										</li>
									</ul>
								</div>
							</li>
						</ul>
					</div>
					<div class="hr"></div>
				</div>
				<div class="linkInfo">
					<div class="step-tit">
						<h5>发票信息</h5>
					</div>
					<div class="step-cont">
						<span>普通发票（电子）</span>
						<span>个人</span>
						<span>明细</span>
					</div>
				</div>
				<div class="cardInfo">
					<div class="step-tit">
						<h5>使用优惠/抵用</h5>
					</div>
				</div>
			</div>
		</div>
		<div class="order-summary">
			<div class="static fr">
				<div class="list">
					<span><i class="number">{{total}}</i>件商品，总商品金额</span>
					<em class="allprice">¥{{ly.formatPrice(totalPrice)}}</em>
				</div>
				<div class="list">
					<span>返现：</span>
					<em class="money">{{ly.formatPrice(fanxian)}}</em>
				</div>
				<div class="list">
					<span>运费：</span>
					<em class="transport">{{ly.formatPrice(this.order.postFee)}}</em>
				</div>
			</div>
		</div>
		<div class="clearfix trade">
			<div class="fc-price">应付金额:　<span class="price">¥{{ly.formatPrice(actualPrice)}}</span></div>
			<div class="fc-receiverInfo">
				寄送至:{{addresses[selectedAddress].address}}
				收货人：{{addresses[selectedAddress].name}} {{addresses[selectedAddress].phone}}
			</div>
		</div>
		<div class="submit">
			<a class="sui-btn btn-danger btn-xlarge" href="javascript:void(0);" @click="submitCart()">提交订单</a>
		</div>
	</div>

	</div>
	<script src="./js/vue/vue.js"></script>
	<script src="./js/axios.min.js"></script>
	<script src="./js/common.js"></script>
	<script type="text/javascript">
        var orderInfoVm = new Vue({
            el:"#orderInfoApp",
            data:{
            	ly,
                addresses:[// 可选地址列表,假数据，需要从后台查询
					{
					    name:"张忆菲",// 收件人姓名
						phone:"17612944805",// 电话
						state:"陕西",// 省份
						city:"咸阳",// 城市
						district:"秦都区",// 区
						address:"钓台大道统一路咸阳职业技术学院",// 街道地址
						zipCode:"712000", // 邮编
						default: false
					},
					{
						name:"申儿",// 收件人姓名
						phone:"18392310581",// 电话
						state:"陕西",// 省份
						city:"咸阳",// 城市
						district:"秦都区",// 区
						address:"钓台大道统一路咸阳职业技术学院",// 街道地址
						zipCode:"712000", // 邮编
						default: true
					},
                    {
                        name:"张忆敏",// 收件人姓名
                        phone:"15228252074",// 电话
                        state:"四川",// 省份
                        city:"眉山市",// 城市
                        district:"东坡区",// 区
                        address:"富牛镇 眉州大道东延段5号学生公寓菜鸟驿站",// 街道地址
                        zipCode:"620020", // 邮编
                        default: false
                    }
				],
				selectedAddress: 0,
				order:{
                	paymentType:2,
					postFee:1000
				},
				carts:[],
				fanxian:5000,
            },
			created(){
				ly.verify().then(res =>{
					//登录
					this.carts = ly.store.get("LY_SELECTED");
				}).catch(()=>{
					/*//删除购物车
                    this.carts.splice(index,1);
                    //未登录购物车的查询
                    ly.store.set("LY_CART",this.carts);*/

					//未登录，跳转到登录页面
					window.location = "http://www.leyou.com/login.html?returnUrl=http://www.leyou.com/getOrderInfo.html";
				})
			},
			methods:{
				submitCart(){
					ly.verify().then(res =>{
						//登录
						const address = this.addresses[this.selectedAddress];
						let addr = {
							receiver: address.name,
							receiverMobile: address.phone,
							receiverState: address.state,
							receiverCity: address.city,
							receiverDistrict: address.district,
							receiverAddress:  address.address,
							receiverZip: address.zipCode,
							invoiceType: 0,
							sourceType:2
						};
						const orderDetail = {orderDetails:this.carts};
						Object.assign(this.order,addr,orderDetail,{totalPay:this.totalPrice,actualPay:this.actualPrice,buyerMessage:"",buyerNick:res.data.username})
						ly.http.post("/order/order",this.order,{
							transformResponse: [
								function(data){
									return data;
								}
							]
						}).then(res =>{
							window.location = "http://www.leyou.com/pay.html?orderId="+res.data+"&actualPrice="+this.actualPrice;
						})
					}).catch(()=>{
						/*//删除购物车
                        this.carts.splice(index,1);
                        //未登录购物车的查询
                        ly.store.set("LY_CART",this.carts);*/

						//未登录，跳转到登录页面
						window.location = "http://www.leyou.com/login.html?returnUrl=http://www.leyou.com/getOrderInfo.html";
					})
				}
			},
			computed:{
				total(){
					return this.carts.reduce((c1,c2) =>c1 + c2.num,0);
				},
				totalPrice(){
					return  this.carts.reduce((c1,c2) => c1 + c2.num * c2.price ,0);
				},
				actualPrice(){
					return this.totalPrice + this.order.postFee - this.fanxian;
				}
			},
			components:{
                shortcut: () => import("/js/pages/shortcut.js")
			}
        });
	</script>

	<!-- 底部栏位 -->
	<!--页面底部，由js动态加载-->
	<div class="clearfix footer"></div>
	<script type="text/javascript" src="js/pIugins/jquery/jquery.min.js"></script>
	<script type="text/javascript">$(".footer").load("foot.html");</script>
	<!--页面底部END-->

<script type="text/javascript" src="js/pIugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/pIugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/pages/getOrderInfo.js"></script>
</body>

</html>
